<template>
  <f7-page >
    <f7-navbar title="吉林动画学院公务用车申请表"></f7-navbar>
    <f7-list inline-labels no-hairlines-md >
      <f7-list-item >
        <f7-label>名称</f7-label>
        <f7-input type="text" :value="formContent.title" @input="formContent.title = $event.target.value"></f7-input>
      </f7-list-item>

      <f7-list-item  >
        <f7-label>申请部门</f7-label>
        <f7-input type="select" placeholder="Please choose..." :value="formContent.orgName"
                  @input="formContent.orgName = $event.target.value">
          <option  v-for="item in orgNames" v-bind:key="item.id" v-bind:value="item.name" >{{item.name}}</option>
        </f7-input>
      </f7-list-item>

      <f7-list-item >
        <f7-label>用车事由</f7-label>
        <f7-input type="text" :value="formContent.reason" @input="formContent.reason = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>乘车人数</f7-label>
        <f7-input type="tel" :value="formContent.usageCount" @input="formContent.usageCount = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item  >
        <f7-label>用车开始时间</f7-label>
        <f7-input type="datetime-local" placeholder="请输入开始时间"  :value="formContent.beginDate" @input="formContent.beginDate = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>用车结束时间</f7-label>
        <f7-input type="datetime-local" placeholder="请输入结束时间"  :value="formContent.endDate" @input="formContent.endDate = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>用车起始地点</f7-label>
        <f7-input type="text" :value="formContent.address" @input="formContent.address = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item >
        <f7-label>联系电话</f7-label>
        <f7-input type="tel"   :value="formContent.operatorPhone"   @input="formContent.operatorPhone = $event.target.value"></f7-input>
      </f7-list-item>

      <f7-list-item>
        <span>市内用车</span>
        <f7-toggle color="orange" :checked="formContent.city"  @change="checkCityTaggle"></f7-toggle>
      </f7-list-item>
      <f7-list-item>
        <span>教务部签批</span>
        <f7-toggle color="orange" id="m1" @change="checkNMTaggle" :checked="formContent.needTeachingUser"  ></f7-toggle>
      </f7-list-item>
      <f7-list-item>
        <span>平台建设与管理中心签批</span>
        <f7-toggle color="orange" id="m2" :disabled="true" :checked="formContent.needTeachingUser == true ? false : true"></f7-toggle>
      </f7-list-item>
    </f7-list>

    <f7-block strong>
      <f7-row>
        <f7-col width="50">
          <f7-button fill raised @click="submitApply">提交</f7-button>
        </f7-col>
        <f7-col width="50">
          <f7-button fill raised back>取消</f7-button>
        </f7-col>
      </f7-row>
    </f7-block>


  </f7-page>
</template>

<script>
    export default {
      name: "applyTeachingCarTable",
      data() {
        return {
          userId: sessionStorage.getItem('userId'),
          orgNames: this.GLOBAL.orgNames,
          pastMemory: {},
          formContent: {
            title: "吉林动画学院教学用车申请表",
            createBy: sessionStorage.getItem('userName'),
            orgName: "动画工程中心",
            orgId: 20769,
            reason:"",
            usageCount: 0,
            beginDate:"",
            endDate:"",
            address: "",
            city: true,
            needTeachingUser: true,
            operatorPhone:"",
          }
        }
      },
      created() {
        this.$f7ready((f7) => {
          let that = this;
          f7.request.setup({
            headers: {
              'AccessToken': sessionStorage.getItem('accessToken'),
              'JSESSIONID': sessionStorage.getItem('userToken'),
            }
          });
          if (that.$f7route.params.id > -1 )  {
            f7.request.json(that.GLOBAL.RequestAddress + '/camel/rest/teachingcarapplys', {
              'page': 1,
              'limit': 10,
              'jsonStr': '',
              'otherStr': '',
              'start': '0'
            }, function (result) {
              if (result.totalCount > 0) {
                for (let pm of result.data) {
                  if (pm.id == that.$f7route.params.id) {
                    that.pastMemory = pm;
                    break;
                  }
                }
                if (Object.keys(that.pastMemory).length === 0) {
                  return;
                } else {
                  that.formContent.title = that.pastMemory.title;
                  that.formContent.createBy = that.pastMemory.createBy;
                  that.formContent.createById = that.pastMemory.createById;

                  that.formContent.orgName = that.pastMemory.orgName;
                  that.formContent.reason = that.pastMemory.reason;
                  that.formContent.city = that.pastMemory.city;
                  that.formContent.needTeachingUser = that.pastMemory.needTeachingUser;
                  that.formContent.auditResult = that.pastMemory.auditResult;
                  that.formContent.usageCount = that.pastMemory.usageCount;
                  that.formContent.beginDate = that.pastMemory.beginDate.replace(' ','T');
                  that.formContent.endDate = that.pastMemory.endDate.replace(' ','T');

                  that.formContent.address = that.pastMemory.address;
                  that.formContent.operatorPhone = that.pastMemory.operatorPhone;
                }
              }
            })
          }
        });
      },
      methods: {
        submitApply: function (event) {
          let that = this;
          let ff = that.formContent;
          let app = that.$f7;

          if(that.checkValidate() == false) {
            return
          }
          that.findIDFromOrgName(that.formContent.orgName);

          that.formContent.beginDate = that.formContent.beginDate.replace('T',' ') + ":00"
          that.formContent.endDate = that.formContent.endDate.replace('T',' ') + ":00"

          if (Object.keys(that.pastMemory).length === 0) {
            that.findIDFromOrgName(that.formContent.orgName);
            app.request.postJSON(that.GLOBAL.RequestAddress + '/camel/rest/teachingcarapplys', ff, function (result) {
              that.showAlert("提示", result.msg)
            }, function(err ) {
              app.dialog.alert("添加新纪录异常，请重新添加", "提示");
            });
          } else {
            ff.id = that.pastMemory.id;
            let url = that.GLOBAL.RequestAddress + '/camel/rest/teachingcarapplys/' + that.pastMemory.id;
            that.putRequest(url, ff);
          }
        },
        showAlert: function (title, text) {
          let that = this;
          let app = that.$f7;
          app.dialog.alert(text, title, () => {
            that.$f7router.back();
          });
        },
        checkNMTaggle(event) {
          const self = this;
          const app = self.$f7
          const value = event.target.checked;
          self.formContent.needTeachingUser = value;
          const mytoggle = app.toggle.get('#m2');
          mytoggle.toggle();


        },
        findIDFromOrgName: function (name) {
          let that = this;
          for(let item of that.orgNames) {
            if(item.name.localeCompare(name) == 0){
              that.formContent.orgId = item.id;
              that.formContent.orgName = item.name;
              break;
            }
          }
          return;
        },
        putRequest: function (url, cargo) {
          let that = this;
          fetch(url,
            {method: "put",
              headers: {
                "Content-Type": "application/json;charset=UTF-8",
                'AccessToken': sessionStorage.getItem('accessToken'),
                'JSESSIONID': sessionStorage.getItem('userToken'),
              },
              body: JSON.stringify(cargo)
            }).then (response => response.json())
            .then(  result => {
              console.log(result)
              that.showAlert("提示", result.msg)
            }).catch(function(err){
            console.log("Fetch错误",err)
          });
        },
        checkCityTaggle(event) {
          const self = this;
          const value = event.target.checked;
          self.formContent.city = value;
          if(value == false) {
            self.formContent.city = false;
          }
        },
        checkValidate: function () {
          let that = this;
          let app = that.$f7;

          if(that.formContent.reason.length < 1) {
            app.dialog.alert("请填写用车事由", "提示", null);   return false
          } else if(that.formContent.beginDate.length < 1) {
            app.dialog.alert("请填写用车开始时间", "提示", null);   return false
          } else if(that.formContent.endDate.length < 1) {
            app.dialog.alert("请填写用车结束时间", "提示", null);   return false
          } else if(that.formContent.address.length < 1) {
            app.dialog.alert("请填写用车起始地点", "提示", null);   return false
          } else if(that.formContent.operatorPhone.length < 1) {
            app.dialog.alert("请填写联系电话", "提示", null);   return false
          }

          return true;
        }
      },
    }
</script>

<style scoped>

</style>
